<template>
    <div>
        <div class="head">
            <el-upload
            class="avatar-uploader"
            name="userimg"
            :data="{
                username: user.username
            }"
            action="http://localhost:8080/upload/user_avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
                <el-avatar size="large" :src="avatarUrl"></el-avatar>
            </el-upload>
            <div class="right">
                <div class="name">{{ user.username }}</div>
                <div class="info">
                    <span>{{ user.article_num }}</span>原创<div class="line">|</div>
                    <span>{{ user.fans }}</span>粉丝<div class="line">|</div>
                    <span>{{ user.followed }}</span>关注
                </div>
                <div class="brief">个人简介: 这个人很懒，什么都没有</div>
            </div>
        </div>
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="文章列表" name="first">
                    <article-item v-for="item in articles" :key="item.id" :item="item"></article-item>
                </el-tab-pane>
                <el-tab-pane label="关注的人" name="second">
                    <Fans/>
                </el-tab-pane>
                <el-tab-pane label="粉丝列表" name="third">
                    <Fans/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue';
import Fans from '@/components/Fans.vue';
import { userCenter } from '@/api';
export default {
    components:{
        ArticleItem,
        Fans
    },
    data(){
        return {
            activeName:'first',
            articles:[],
            user:''
        }
    },
    computed:{
        avatarUrl(){
            return this.$store.state.avatarUrl
        }
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleAvatarSuccess(res, file) {
            this.$store.commit('userAvatarUrl', res + '?timestamp=' + new Date().getTime())
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    mounted() {
        let id = localStorage.getItem('id')
        userCenter({ params:{ userid: id } }).then(res => {
            let { data } = res
            let articles = data.blogList
            let article_num = data.article_number
            let fans = data.fans
            let followed = data.followed
            let username = data.username
            let user = {
                article_num,
                fans,
                followed,
                username
            }
            this.articles = articles
            this.user = user
        })
    },
}
</script>

<style lang="less" scoped>
.head{
    width: 100%;
    height: 145px;
    margin-top: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    .el-avatar{
        width: 90px;
        height: 90px;
    }
    .right{
        margin-left: 20px;
        margin-top: 10px;
        .name{
            font-size: 22px;
            font-weight: 500;
            color: #222226;
            font-style: italic;
            letter-spacing: 1px;
        }
        .info{
            margin: 12px 0;
            font-size: 15px;
            color: #555666;
            span{
                font-size: 20px;
                color: #222226;
                margin-right: 5px;
                font-weight: bold;
            }
            .line{
                font-size: 21px;
                width: 1px;
                height: 100%;
                display: inline-block;
                margin: 0 20px;
                color: rgb(211, 211, 211);
                font-weight: 100;
            }
        }
        .brief{
            color: #555666;
            font-size: 14px;
        }
    }
}
.content{
    padding: 0 20px;
    /deep/.el-tabs__nav .is-top{
        font-size: 16px;
        color: #555666;
    }
}
.avatar-uploader .el-upload {
    cursor: pointer;
    overflow: hidden;
}
</style>